<link href="{$base_dir}css/autocomplete.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src='{$base_dir}js/jquery.autocomplete.lhv.js'></script>
<script type="text/javascript" src="{$base_dir}js/jquery.form.js"></script>
<script type="text/javascript" src="{$base_dir}js/selectboxes.js"></script>
<script type="text/javascript" src="{$base_dir}js/AJAX_AddPatient.js"></script>

<script type="text/javascript">
{literal}
	$(document).ready(function(){
		activeMenu('2', '3');		
		nationalityChange();
	});
{/literal}
</script>

<div id="barLoading" style="display:none; width: 590px;" align="center">
	<img src="{$base_uri}/images/ajax-loader.gif"/>
</div>
<span id='statusMessage' class='formAlertMsg'></span><br/>
<form name="addDemographicsForm" action="{$FORM_ACTION}" method="post">
	<div id="patientDetailsInfo">
		<table cellspacing="0" cellpadding="0" class='grid' style='width: 100%'>
	    	<caption>{translate}Patient's information detail{/translate}</caption>
	     	<tr>
	            <td class="form_label" style='width: 120px;'>{translate}Full name{/translate} *</td>
	            <td class="form_input" style='width: 220px;'><input id="personName" name="person[name]" type="text" value="" style="width: 188px;"/></td>
	            <td class="form_label" style='width: 120px;'>{translate}Gender{/translate} *</td>
	            <td class="form_input" style='width: 150px;'>
	                <input id='genderMale' type="radio" name="person[gender]" value="male"/><span class='label'>{translate}Male{/translate}</span>&nbsp;&nbsp;
	                <input id='genderFemale' type="radio" name="person[gender]" value="female"/><span class='label'>{translate}Female{/translate}</span>	                	                		               	                
	            </td>
	            <td class="form_label" style='width: 120px;'>{translate}Nationality{/translate}</td>
	           	<td class="form_input" style='width: 150px;'>
	           		<select name="person[nationality]" id="nationality" style="width: 125px;">
	           			{html_options options=$countryList selected=1}
	           		</select>
	           	</td>
	       	</tr>
	       	<tr>
	           	<td class="form_label">{translate}Date of birth/Age{/translate} *</td>
	           	<td class="form_input">
              		<input name="person[DOB_{$datePart_0}]" id="DOB_{$datePart_0}" type="text" value="" style='width: 30px;' onkeyup="return autoTab(this, 2, 'DOB_{$datePart_1}')">
              		<input name="person[DOB_{$datePart_1}]" id="DOB_{$datePart_1}" type="text" value="" style='width: 30px;' onkeyup="return autoTab(this, 2, 'birthday')">
              		<input name="person[DOB_{$datePart_2}]" id="birthday" type="text" value="" style='width: 58px;' onkeyup="return autoTab(this, 4, 'person_age')">&nbsp;-
              		<input name="person_age" id="person_age" type="text" value="" style='width: 30px;'/>
               		<br/>
	               	<span class="label" style="width: 21px; color: #AAA;">({$datePart_0}-{$datePart_1}-{$datePart_2})</span>
	            </td>
	          	<td class="form_label">{translate}Phone number{/translate}</td>
	            <td class="form_input">
	                <input name="person[phone_number]" id="person_phone_number" type="text" value="" style='width: 120px;'/>
	            </td>
	            <td class="form_label">Email</td>
	            <td class="form_input">
	            	<input name="person[email]" id="person_email" type="text" value="" style='width: 120px;'/>
	            </td>   
	       	</tr>
	        <tr>
	            <td class="form_label">{translate}Address{/translate}</td>
	            <td class="form_input" colspan="5">
	                <input name="address[street]" id='adrStreet' type="text" value="" style="width: 188px;"/>&nbsp;                   
	            	<select name="address[province_id]" id="province_id" style="width: 145px;">
						<option value="0" label="- - -">- {translate}Province{/translate} -</option>
						{html_options options=$provinceList selected=29}
					</select>
					<select name="address[district_id]" id="district_id" style="width: 145px;">
					</select>&nbsp;&nbsp;
					<span class="label">{translate}Ward{/translate}</span>
					<input name="address[ward_name]" id="ward_name" type="text" style="width: 120px;" value=""/>
	            </td>
	       	</tr>
	       	 <tr class='last'>
	        	<td class="form_label">{translate}Career{/translate}</td>
	            <td class="form_input">
	                <select name="person[career_id]" id="career_id" style="width: 145px;">
	                	<option value="-1" selected="selected">- - -</option>
						{html_options options=$careerList}
	                </select>
	            </td>  
				<td class="form_label">{translate}Working place{/translate}</td>
				<td class="form_input" colspan='3'>
				    <select name="person[workingplace_province_id]" id="workingProvince" style="width: 145px;">
				        <option value="-1" label="- - -">- {translate}Province{/translate} -</option>
				        {html_options options=$provinceList}
				    </select> 
				    <select name="person[workingplace_district_id]" id="workingDistrict" style="width: 145px;">
				        <option value="0" label="- - -">- {translate}District{/translate} -</option>
				    </select>
				</td>
	        </tr>
	     </table>
	</div>
   
    <div id="insuranceAndRelations" style='margin-top: 20px;'>
		<table cellspacing="0" cellpadding="0" class='grid' style='width: 100%'>
			<caption>{translate}Insurance and relative information{/translate}</caption>
	      	<tr>
				<td class="form_label" style='width: 120px;'>{translate}Medicial insurance number (if have){/translate}</td>
				<td class="form_input" style='width: 220px;'>
	            	<input id="insuranceCode" name="insurance[insurance_code]" type="text" value="" style="width: 188px;"/> 
				</td>
				<td class="form_input" style='width: 120px;'>&nbsp;</td>
				<td class="form_label" style='width: 150px;'>{translate}Insurance type{/translate}</td>
				<td class="form_input" style='width: 150px;'>
					<select name="insurance[insurance_type]" id="insurance_type" style="width: 125px;">
				    	<option>- {translate}Type{/translate} -</option>
				       	<option value="required">{translate}Required{/translate}</option>
				       	<option value="volunteered">{translate}Volunteered{/translate}</option>
				   	</select>
				</td>
				<td class="form_input" style='width: 120px;'>&nbsp;</td> 
			</tr>
	   		<tr>
	            <td class="form_label">{translate}Issue date / Expired date{/translate}</td>
	            <td class="form_input" colspan='2'>
	                <input name="insurance[issued_{$datePart_0}]" id="issued_{$datePart_0}" type="text" value="" style="width: 30px;" onkeyup="return autoTab(this, 2, 'issued_{$datePart_1}')">
	                <input name="insurance[issued_{$datePart_1}]" id="issued_{$datePart_1}" type="text" value="" style="width: 30px;" onkeyup="return autoTab(this, 2, 'insurance_date_issued')">
	                <input name="insurance[issued_{$datePart_2}]" id="insurance_date_issued" type="text" value="" style="width: 58px;" onkeyup="return autoTab(this, 4, 'expired_{$datePart_0}')">&nbsp;-                  
	                <input name="insurance[expired_{$datePart_0}]" id="expired_{$datePart_0}" type="text" value="" style="width: 30px;" onkeyup="return autoTab(this, 2, 'expired_{$datePart_1}')">
	                <input name="insurance[expired_{$datePart_1}]" id="expired_{$datePart_1}" type="text" value="" style="width: 30px;" onkeyup="return autoTab(this, 2, 'insurance_date_expired')">
	                <input name="insurance[expired_{$datePart_2}]" id="insurance_date_expired" type="text" value="" style="width: 58px;">
	                <br/>
	               	<span class="label" style="width: 21px; color: #AAA;">({$datePart_0}-{$datePart_1}-{$datePart_2})</span>
	            </td>
	        	<td class="form_label">{translate}Place of registered examination{/translate}</td>
	        	<td class="form_input" colspan='2'><input type="text" name="registeredHospital" id="registeredHospital" value="" style="width: 220px;"></td>
	        </tr>    
	        <tr>
	            <td class="form_label">{translate}Relative name{/translate}</td>
	            <td class="form_input" colspan='2'><input id="patient_relative_name" name="patient[relative_name]" type="text" value="" style="width: 188px;"/></td>
	            <td class="form_label">{translate}Phone number{/translate}</td>
	            <td class="form_input" colspan='2'>
	                <input id="patient_relative_number" name="patient[relative_number]" type="text" value="" style="width: 120px;"/>
	            </td>
	        </tr>
	        <tr class='last'>
	            <td class="form_label">{translate}Address{/translate}</td>
	            <td class="form_input" colspan='5'>
	                <input id="patient_relative_address" name="patient[relative_address]" type="text" value="" style="width: 480px;"/>
	            </td>
	        </tr>						          			 	
	    </table>
    </div>
	<div style='margin-top: 20px; text-align: right;'>
    	<input name="addDemographicsAndService" type="submit" value="{translate}Save and register service{/translate}" onclick="return isReadyToSubmitAdd();">	                	                 	                
		<input name="addDemographics" type="submit" value="{translate}Save{/translate}" onclick="return isReadyToSubmitAdd();">
	</div>
</form>